<template>
    <div class="login-container">
        
        <particles></particles>
        <div class="login-content">
            <div class="left">
                <p class="title">
                    <img src="../../static/image/loginLeft.png" class="logoLeft" alt=""> <span class="xian"></span> PAE多功能模块
                </p>
                
            </div>
            <div class="right">
                <el-form class="login-content-form" label-position="left" label-width="80px"  ref="ruleForm" :model="formData">
                    <el-form-item label="用户名" class="loginLnpit">
                        <el-input type="text" placeholder="请输入账号" v-model="formData.username"></el-input>
                    </el-form-item>
                    <p class="tip" v-if="msg1">{{msg1}}</p>
                    <el-form-item label="密码" class="loginLnpit">
                        <el-input type="password" placeholder="请输入密码" v-model="formData.password"></el-input>
                    </el-form-item>
                    <p class="tip" v-if="msg">{{msg}}</p>
                    <div class="Remember">
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                    </div>
                        <el-form-item class="loginBtn">
                        <el-button type="primary" class="login-content-submit" @click="handleLogin()" :loading="loading">
                            <span>登录</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import Particles from '@/components/particles/index'
import { login } from '@/api/login'
export default {
    components: {
        Particles
    },
    data(){
        return {
            isShowPassword: false,
            formData: {
				username: '',
				password: '',
			},
            checked:false,
            loading:false,
            tip:false,
            msg:"",
            msg1:""
        }
    },
    created(){
        // ZsIlPOGfJ2hBb7Dp
        if(localStorage.username){
            let username = JSON.parse(localStorage.getItem("username")).username
            let password = JSON.parse(localStorage.getItem("username")).password
            this.checked = JSON.parse(localStorage.getItem("username")).checked
            this.formData.username = window.atob(username)
            this.formData.password = window.atob(password)
        }
    },
    methods:{
        handleLogin(){
            this.msg = ""
            this.msg1 = ""
            if(!this.formData.username){
                this.msg1 = '请输入登录账号'
                return
            }
            if(!this.formData.password){
                this.msg = '请输入密码'
                return
            }
            this.tip = false
            this.loading = true
            login.login(this.formData).then(res => {
                this.loading = false
                if(res.code == 200){
                    localStorage.setItem("isLogin",true)
                    if(this.checked){ //如果记住密码
                        let username = {
                            username:window.btoa(this.formData.username),
                            password:window.btoa(this.formData.password),
                            checked:this.checked
                        }
                        //加密后的账号密码存起来下次进入获取
                        localStorage.setItem("username", JSON.stringify(username))
                    }else{
                        //如果没选择记住密码就把之前存过的删掉
                        localStorage.removeItem("username")
                    }
                    this.$router.push("/recipeManage")
                }else{
                    this.msg = res.msg
                }
            }).catch(e => {
                this.$message.error('登录失败');
                this.loading = false
            })
        }
    }
}
</script>

<style scoped>
    .login-container{
        width: 100%;
        height: 100%;
        background: url("../../static/image/bg1.png");
        padding: 1px;
        position: relative;
    }
    .login-content{
        position: absolute;
        width: 100%;
        top: 50%;
        background: rgba(78,101,181, 0.5);
        transform:translateY(-50%);
        z-index: 2;
        display: flex;
    }
    .loginLnpit >>> input{
        background: #fff;
        border: none;
        color: #333;
    }
    .Remember{
        text-align: left;
        padding-left: 80px;
    }
    .Remember >>> .el-checkbox{
        color: #c9d0d5 ;
    }
    .login-content-form .login-content-submit{
        width: 100%;
        letter-spacing: 2px;
        font-weight: 300;
        margin-top: 15px;
    }
    .loginLnpit >>> input::placeholder{
        color: #666;
    }
    .loginLnpit >>> .el-form-item__label{
        color: #b0b3b9;
    }
    .company{
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 20px;
        color: #adb7be;
    }
    .logoLeft{
        width:100px;
        vertical-align: -15px;
    }

    .left{
        width: 35%;
        text-align: center;
        color: #fff;
        letter-spacing: 2px;
        font-weight: 100;
        position: relative;
        padding: 30px 0;
    }
    .title{
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        font-size: 14px;
        width:100%
    }
    .right{
         width: 400px;
         padding: 30px 0;
    }
    @media screen and (max-width: 900px) {
        .right{
            width: 330px;
            padding: 30px 0;
        }
    }
    .login-content-form >>> .el-form-item{
        margin-bottom: 10px !important;
    }
    .login-content-form >>> .el-input__inner{
        border-radius: 0;
    }
    .xian{
        display: inline-block;
        height: 30px;
        width: 1px;
        background: #fff;
        vertical-align: -10px;
        margin: 0 0px;
    }
    .login-content-form >>> .el-form-item.loginBtn{
        margin-bottom: 0 !important;
    }
    .tip{
        color:#f56c6c;
        padding-left:80px;
        margin-top:-10px;
        font-size:12px
    }
</style>
